﻿@page "/utilities/gap"

<DocsPage>
    <DocsPageHeader Title="Gap" SubTitle="Utilities for controlling gutters between grid and flexbox items." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Class Reference" HideTitle="true" />
            <DocsAutoGen_Flexbox_Gap/>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Basic Usage" />
            <SectionSubGroups>
 
                <DocsPageSection>
                    <SectionHeader Title="Setting Gap">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(GapBasicExample)" HighLight="gap-4">
                        <GapBasicExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Row and Column">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(GapRowColExample)" HighLight="gap-x-8,gap-y-4">
                        <GapRowColExample/>
                    </SectionContent>
                </DocsPageSection>

            </SectionSubGroups>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Applying conditionally"/>
            <SectionSubGroups>
                <DynamicBreakpointSectionContent Utility="gap-md-4"/>
            </SectionSubGroups>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

